<template>
	<view class="Global">


		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

		<searchInput :inputcontent="inputcontent" @sendData="getInputValue"></searchInput>



		<view class="contentTop" id="main">

			<view class="contentTopLeft">
				<image class="contentTopLeftImg" src="/static/clock/xinzeng.png" mode=""></image>
				<text class="contentTopLeftText">批量邀请员工录入人脸</text>
			</view>

			<view class="contentTopLeft" style="background: #9E9E9E;" v-if="isShow" @click="getButttonValue">
				<image class="contentTopLeftImg" src="/static/clock/yuangong.png" mode=""></image>
				<text class="contentTopLeftText">查看未录入员工</text>
			</view>
      <view class="contentTopLeft" v-else @click="getButttonValue">
        <image class="contentTopLeftImg" src="/static/clock/yuangong.png" mode=""></image>
        <text class="contentTopLeftText">查看未录入员工</text>
      </view>

		</view>


		<scroll-view scroll-y="true" class="contentScrollList" :style="'height:'+scrollViewHeight+'px'">
			<view class="contentScroll">


				<view class="contentScrollItem" v-for="(item,index) in listData"  >

					<view class="contentScrollItemLeft" @click="goDetail(item)">
						<image class="contentScrollItemLeftImg" src="/static/clock/touxiang.png" mode=""></image>
						<text class="contentScrollItemLeftText">{{item.nickName}}</text>
					</view>
					<view class="contentScrollItemRight">
						<text class="contentScrollItemRightText" v-if="item.imgUrl==null ||item.imgUrl==''" @click="listItemClick(item)">人脸录入</text>
						<text class="contentScrollItemRightText" v-else >已录入人脸</text>
					</view>


					<!-- <view class="line"></view> -->

				</view>


			</view>


		</scroll-view>




		<!-- 点击列表弹出-->
		<uni-popup ref="popupBag" type="bottom">
			<view class="bagDetail">
				<text class="bagDetailUpadte" @click="userCheckDev()">同步至设备</text>
				<view class="lineBg"></view>

				<text class="bagDetailUpadte" @click="deleteData()">手机录入</text>
				<view class="lineBg1"></view>
				<text class="bagDetailCancel" @click="close()">取消</text>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'
	import searchInput from '@/components/searchInput.vue'
  import {userFaceList,syncUserCheckDev} from "@/pages/api/api.js";




	export default {
		components: {
			MyNav,
			bgImage,
			searchInput
		},
		data() {
			return {
				title:'人脸录入',
				isback:true,

				inputcontent: '员工姓名/工号',


				listData:[],

				mainTop: 0,
				scrollViewHeight:0,

				// 提交参数
				sizeManagerData: {

				},
        isShow: false,
        devId: '',
        query: {
          userAndNice: '',
          notFace: '',
          storeId: '',
          tenantId: '',
        }
			}
		},

		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// 在其他页面或组件中访问
				const app = getApp();
				this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
					.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

		},
		onLoad: function(option){
      this.devId = JSON.parse(decodeURIComponent(option.devId));
			// this.loadData()
      const app = getApp();
      this.query.storeId = app.globalData.storeId
      this.query.tenantId = app.globalData.tenantId
      this.getUserFaceList();
		},
		methods: {

      getUserFaceList(){
        userFaceList(this.query).then(res=>{
          if(res.code==200){
            this.listData = res.rows;
          }
        })
      },
      goDetail(item){
        uni.navigateTo({
          url: '/subPack/clockIn/faceRecording/faceRecordOne?user='+encodeURIComponent(JSON.stringify(item)),
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      },
      userCheckDev(){
        uni.showModal({
          title: '提示',
          content: '是否同步至设备',
          showCancel: true,
          success: (res) => {
            if (!res.confirm) {
              return
            }
            let data = {
              devId: this.devId,
              userId: this.listItemData.userId
            }
            syncUserCheckDev(data).then(res=>{
              if(res.code==200){
                uni.showToast({
                  title: '同步成功',
                  icon: 'none'
                });
                this.getUserFaceList();
              }else{
                uni.showToast({
                  title: '同步失败！',
                  icon: 'error'
                });
              }
            })
          }
        })

      },
			// 设备录入
			updateData(){
				this.close()


			},

			// 列表点击事件
			listItemClick(e) {

				this.open(e)
			},
			// 打开弹框
			open(e) {
				// console.log('点了');
				this.$refs.popupBag.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e


			},
			// 关闭弹框
			close() {
				this.$refs.popupBag.close()
			},

			// 获取输入框的值
			getInputValue(e) {
				console.log('获取输入框的值', e);
        this.query.userAndNice = e
        this.getUserFaceList();
			},
      getButttonValue(){
        if(this.isShow){
          this.isShow = false;
          this.query.notFace='';
        }else {
          this.isShow = true
          this.query.notFace=true;
        }
        this.getUserFaceList();
      }

		}
	}
</script>

<style>
	.lineBg1 {
		width: 100%;
		height: 20rpx;
		background: #F9FCFF;
	}

	.bagDetailCancel {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;



	}

	.bagDetailDelete {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: red;

	}

	.bagDetailUpadte {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border-radius: 20rpx 20rpx 0 0; */
		/* background-color: white; */
	}

	.bagDetail {
		width: 100%;
		height: 380rpx;

		border-radius: 50rpx 50rpx 0 0;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;


	}
	.line {
		width: 630rpx;
		height: 1rpx;
		background: #F9FCFF;

	}
	.contentScrollItemRightText{

		display: flex;
		align-items: center;
		justify-content: center;

		width: 142rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2px solid #0081FF;



		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0081FF;


		margin-right: 30rpx;
	}
	.contentScrollItemRight{
		display: flex;
		align-items: center;
		justify-content: center;

	}
	.contentScrollItemLeftText{
		display: flex;


		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;


	}
	.contentScrollItemLeftImg{
		display: flex;
		align-items: center;

		width: 60rpx;
		height: 60rpx;
		margin-right: 30rpx;
		margin-left: 30rpx;
	}

	.contentScrollItemLeft{
		display: flex;

		justify-content: center;
		align-items: center;
		height: 100%;

	}

	.contentScrollItem{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 120rpx;

		border-bottom: #F9FCFF solid 1rpx;

	}


	.contentScrollList{

		display: flex;
		justify-content: center;
		align-items: center;
			flex-direction: column;
		width: 690rpx;
		height: 800rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}
	.contentScroll{

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 100%;
	}

	.contentTopLeftText{
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;

	}
	.contentTopLeftImg{
		display: flex;
		width: 30rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
		height: 30rpx;
	}
	.contentTopLeft{
		display: flex;
		align-items: center;
		justify-content: center;

		width: 330rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 16rpx;
	}
	.contentTop{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 30rpx;

		width: 100%;

	}

</style>
